<script src="./page.js"></script>
<style lang="less" rel="stylesheet/less" scoped>
    @import "./page.less";
</style>

<template>
<div class="card-wrapper">
  <!-- <el-row type="flex" class="row-bg mb9">
    <el-col class="card-panel">
      <el-row class="card-title">
        <i class="el-icon-message"></i>
        <span>消息中心</span>
      </el-row>
      <el-row class="info-wrapper">
        <el-col :span="12" class="info-item">
          <ul class="bd-t">
            <li v-for="(item, index) in infoList" v-bind:key="index" :class="{'bd-t': index==2, 'black-color': index == 0}">
              <el-col :span="7">
                <span :class="{'radio': index == 0}">{{item.timeStr}}</span>
              </el-col>
              <el-col :span="5">
                <span>{{item.type}}</span>
              </el-col>
              <el-col :span="12" class="text-right pr20">
                <span>{{item.detail}}</span>
              </el-col>
            </li>
          </ul>
        </el-col>
        <el-col :span="12" class="info-item">
          <ul class="bd-t">
            <li v-for="(item, index) in infoList" v-bind:key="index" :class="{'bd-t': index==2, 'black-color': index == 0}">
              <el-col :span="7">
                <span :class="{'radio': index == 0}">{{item.timeStr}}</span>
              </el-col>
              <el-col :span="5">
                <span>{{item.type}}</span>
              </el-col>
              <el-col :span="12" class="text-right pr20">
                <span>{{item.detail}}</span>
              </el-col>
            </li>
          </ul>
        </el-col>
      </el-row>
      <el-pagination
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </el-col>
  </el-row> -->
  <div class="card-content">
    <div>
      <!-- <el-collapse accordion v-model="activeNames">
          <el-collapse-item name="1">
              <template slot="title">
                  筛选
              </template> -->
              <div>
                  <el-form class="search-form" :model="param" >
                      <el-row>
                          <el-col :span="5" class="el-item-128">
                              <el-form-item label="企业关键字" :label-width="labelWidth" :size="sizeModel">
                                  <el-input v-model="param.key"></el-input>
                              </el-form-item>
                          </el-col>
                          <el-col :span="5" class="el-item-128">
                              <el-form-item label="是否结算" :label-width="labelWidth">
                                  <el-select v-model="param.status" class="select-input" :size="sizeModel">
                                      <el-option label="是" value="STOP"></el-option>
                                      <el-option label="否" value="START"></el-option>
                                  </el-select>
                              </el-form-item>
                          </el-col>
                          <el-col :span="2" :offset="1" class="mt5">
                              <el-button type="primary" @click="search" class="btn-block green-btn" size="mini" plain>查询</el-button>
                          </el-col>
                          <el-col :span="3" class="mt5">
                              <el-button type="primary" @click="searchReset" class="btn-block green-btn" size="mini" plain>清空</el-button>
                          </el-col>
                      </el-row>
                  </el-form>
              </div>
          <!-- </el-collapse-item>
      </el-collapse> -->
    </div>
    <div class="table-wrapper">
      <el-table :data="bills" stripe>
        <el-table-column label="企业名称" prop="company_name" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div>
              <span style="color: #40A292;">{{scope.row.company_name}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="最近任务" prop="name" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="余额" prop="company_balance">
            <template slot-scope="scope">
            <div>
              <span>{{scope.row.company_balance | filterMoney}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="冻结金额" prop="bill_disable_balance">
            <template slot-scope="scope">
            <div>
              <span>{{scope.row.bill_disable_balance | filterMoney}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="结算金额" prop="bill_close_tax_fee_total">
            <template slot-scope="scope">
            <div>
              <span>{{scope.row.bill_close_tax_fee_total | filterMoney}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="总人数" prop="labor_total_number" width="100px"></el-table-column>
        <el-table-column label="已结算人数" prop="bill_close_labor_number_total" width="100px"></el-table-column>
        <el-table-column label="是否结算" prop="status" width="100px">
             <template slot-scope="scope">
            <div>
              <span>{{scope.row.status === 'START' ? '否' : '是'}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text" style="color: #40A292;" @click="getDetails(scope.row)">详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="total>0" class="mt20" layout="sizes,total, prev, pager, next, jumper" :total="total" :page-size="param.size" :current-page="param.page" @current-change="pageSearch" @size-change="handleSizeChange" background></el-pagination>
    </div>
  </div>
  <el-dialog
    :visible.sync="isShowTaskDetail"
    width="70%"
    class="detail-dialog-task"
    >
    <div class="dialog-content-task">
      <!-- <el-form :model="editParam" label-width="100px" class="form-wrapper">
          <el-row type='flex' align="bottom">
              <el-col :span="12">
                  <el-form-item label="结算人数" class="item last-item">
                      <el-input v-model="editParam.settleAmount" class="select-input"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="结算金额" class="item last-item">
                      <el-input v-model="editParam.settleBalance" class="select-input"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>
      </el-form> -->
      <div class="supplier-info">
           <el-tabs type="border-card">
            <el-tab-pane v-for="(item, index) in supplierList" v-bind:key="index" :label="item.name">
                    <!-- <el-table :data="item.dList" stripe>
                        <el-table-column label="姓名" prop="name" width="70px"></el-table-column>
                        <el-table-column label="电话" prop="phone"></el-table-column>
                        <el-table-column label="身份证" prop="idCard" show-overflow-tooltip></el-table-column>
                        <el-table-column label="开户账号" prop="openAccount" show-overflow-tooltip></el-table-column>
                        <el-table-column label="实发金额" prop="actualAmount" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div>
                                    <span>{{scope.row.actualAmount|filterMoney}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="结算时间" prop="settleTime" show-overflow-tooltip></el-table-column>
                        <el-table-column label="个税" prop="tax">
                            <template slot-scope="scope">
                                <div>
                                    <span>{{scope.row.tax|filterMoney}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="社保" prop="insurance">
                            <template slot-scope="scope">
                                <div>
                                    <span>{{scope.row.insurance|filterMoney}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="总费用" prop="totalAmount" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div>
                                    <span>{{scope.row.totalAmount|filterMoney}}</span>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                <el-pagination v-show="item.dPageTotal>0" class="mt56" layout="prev, pager, next" :total="item.dPageTotal" :page-size="item.dsize" :current-page="item.dpage" @current-change="pageSearchD($event,item.componyName)" @size-change="handleSizeChangeD(item.componyName)"></el-pagination> -->
            </el-tab-pane>
        </el-tabs>
        <!-- <Manage></Manage> -->
        <!-- <ul>
          <li v-for="(item, index) in supplierList" v-bind:key="index">
            <el-row>
              <el-col :span="12" class="supplier-item" v-for="(subItem, subIndex) in item" v-bind:key="subIndex">
                <div class="item-wrapper">
                  <el-row>
                    <el-col>
                      <p>供应商名称A</p>
                    </el-col>
                  </el-row>
                  <el-row class="mt-16">
                    <el-col :span="12">
                      <span class="title">人数</span>
                      <span class="content">100</span>
                    </el-col>
                    <el-col :span="12">
                      <span class="title">占比</span>
                      <span class="content">50%</span>
                    </el-col>
                  </el-row>
                  <el-row class="mt-16">
                    <el-col>
                      <span class="title">费用</span>
                      <span class="content">{{234234.12|filterMoney}}</span>
                    </el-col>
                  </el-row>
                </div>
                <el-button type="primary" @click="getSupplierDetail" class="btn-block green-btn" size="mini">详情</el-button>
              </el-col>
            </el-row>
          </li>
        </ul> -->
      </div>
    </div>
</el-dialog>
  <el-dialog
      :visible.sync="isShowDetail"
      width="70%"
      class="detail-dialog"
      >
      <div class="dialog-content-record">
          <el-tabs type="border-card" @tab-click="handleTabChange">
            <el-tab-pane v-for="(item) in supplierList" v-bind:key="item.id" :label="item.name">
                <el-table :data="detailList" stripe>
                        <el-table-column label="姓名" prop="labor_name" width="70px"></el-table-column>
                        <el-table-column label="电话" prop="labor_mobile"></el-table-column>
                        <el-table-column label="身份证" prop="labor_id_card" show-overflow-tooltip></el-table-column>
                        <el-table-column label="开户账号" prop="bank_code" show-overflow-tooltip></el-table-column>
                        <el-table-column label="实发金额" prop="final_fee" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div>
                                    <span>{{scope.row.final_fee|filterMoney}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="个税" prop="tax_fee">
                            <template slot-scope="scope">
                                <div>
                                    <span>{{scope.row.tax_fee|filterMoney}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="总费用" prop="fee" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div>
                                    <span>{{scope.row.fee|filterMoney}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="结算时间" prop="create_at" show-overflow-tooltip></el-table-column>

                    </el-table>
                <el-pagination v-show="detailTotal>0" class="mt56" layout="prev, pager, next" :total="detailTotal" :page-size="detailParam.size" :current-page="detailParam.page" @current-change="handlePageChangeDetail" @size-change="handleSizeChangeDetail"></el-pagination>
            </el-tab-pane>
        </el-tabs>
          <!-- <Manage></Manage> -->
          <!-- <el-table :data="detailList" stripe>
              <el-table-column label="姓名" prop="name" width="70px"></el-table-column>
              <el-table-column label="电话" prop="phone"></el-table-column>
              <el-table-column label="身份证" prop="idCard" show-overflow-tooltip></el-table-column>
              <el-table-column label="开户账号" prop="openAccount" show-overflow-tooltip></el-table-column>
              <el-table-column label="实发金额" prop="actualAmount" show-overflow-tooltip>
                  <template slot-scope="scope">
                      <div>
                          <span>{{scope.row.actualAmount|filterMoney}}</span>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column label="结算时间" prop="settleTime" show-overflow-tooltip></el-table-column>
              <el-table-column label="个税" prop="tax">
                  <template slot-scope="scope">
                      <div>
                          <span>{{scope.row.tax|filterMoney}}</span>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column label="社保" prop="insurance">
                  <template slot-scope="scope">
                      <div>
                          <span>{{scope.row.insurance|filterMoney}}</span>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column label="总费用" prop="totalAmount" show-overflow-tooltip>
                  <template slot-scope="scope">
                      <div>
                          <span>{{scope.row.totalAmount|filterMoney}}</span>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
          <el-pagination v-show="detailTotal>0" style="margin-top:15px;" layout="prev, pager, next" :total="detailTotal" :page-size="detail.size" :current-page="detail.page" @current-change="pageSearchDetail" @size-change="handleSizeChangeDetail"></el-pagination> -->
      </div>
  </el-dialog>
</div>
</template>
